<template>
  <van-popup
    class="chestSuccessPopup"
    v-model:show="props.show"
    position="center"
    :z-index="999999"
    teleport="body"
    safe-area-inset-bottom
    :close-on-click-overlay="false"
    :style="{ width: '100vw' }"
  >
    <div class="box">
      <div class="box-header items-center">
        <img class="box-icon" src="/image/success-icon.svg" />
        <div class="title items-center">
          <div>{{ $t("lotteryMoney.dhedyzj") }}</div>
        </div>
      </div>
      <!-- footer -->
      <div class="footer items-center">
        <div class="footer-btn" @click="jumpPage">
          {{ $t("lotteryMoney.fhyyym") }}
        </div>
      </div>
    </div>
    <!-- 关闭 -->
    <img
      class="close"
      src="/image/close-fff-icon.svg"
      @click.stop="closePopup"
    />
  </van-popup>
</template>
<script setup lang="ts" name="chestSuccessPopup">
import { ref, reactive, onMounted, computed, nextTick } from "vue";

const props = withDefaults(
  defineProps<{
    show: boolean;
  }>(),
  {
    show: false,
  }
);

const emit = defineEmits(["update:show", "confirm"]);

onMounted(() => {});

// 关闭弹窗
const closePopup = () => {
  emit("confirm");
  emit("update:show", false);
};

// 点击-页面跳转
const jumpPage = async () => {
  navigateBack();
};
</script>
<style lang="scss" scoped>
.chestSuccessPopup {
  margin: 0 !important;
  // width: calc(100vw - 40 * 2px) !important;
  // margin: 0 40 * 2px;
  max-width: initial;
  background-color: transparent !important;
  overflow: initial;
}

.box {
  margin: 0 40 * 2px;
  border-radius: 12 * 2px;
  position: relative;
  background: linear-gradient(180deg, #e2f0ff 0%, #fffeff 63.85%);
  overflow: hidden;
  &-header {
    padding: 20 * 2px;
    justify-content: center;
    flex-direction: column;
  }
  &-icon {
    width: 40 * 2px;
    height: 40 * 2px;
    margin-bottom: 15 * 2px;
  }
}
.title {
  color: #141924;
  text-align: center;
  font-size: 14 * 2px;
  font-weight: 510;
  justify-content: center;
  height: 70 * 2px;
}

.footer {
  width: 100%;
  justify-content: space-around;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
  padding: 10 * 2px 15 * 2px;

  &-btn {
    border-radius: 6 * 2px;
    background-color: #007bff;

    color: #fff;
    text-align: center;
    font-size: 15 * 2px;
    font-weight: 590;

    width: 100%;
    height: 36 * 2px;
    line-height: 36 * 2px;
  }
}

.close {
  position: relative;
  z-index: 9;
  bottom: -20 * 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 30 * 2px;
  height: 30 * 2px;
}
</style>
